
<script lang="ts" setup>
import {reactive, ref,onMounted,watch } from 'vue'
import {helpService, searchPage} from "../../api/help";
import villageData from "../../assets/village.json";
// import {applypoorService} from "../../api/applypoor"; // 注意根据实际路径调整
// import { ref } from 'vue'

const outerVisible = ref(false)
const dialogFormVisible = ref(false)

const selectRow = ref([]);
const value1 = ref('');
const value2 = ref('');
class fClass1
{
  helpmanid =''
  name = ''
}
class fClass2
{
  measureid =''
  measurename = ''
}
const helpData = ref({
  measureid: '',
  money:'',
  helpmanid:'',
  farmerid:''
})
const firstCategorys1 = reactive(
    {
      data: [] as fClass1[]
    })
const firstCategorys2 = reactive(
    {
      data: [] as fClass2[]
    })
const tableData = ref([]); // table数据
const villageOptions = villageData;
const selectedVillage = ref([]);
var requestData=ref([]);
const totalCount = ref(10);
const props1 = {
  checkStrictly: true,
}
const area_data = () =>{
  request_params.pageNum=form.pageNum
  request_params.pageSize=form.pageSize
  request_params.farmerName = form.farmerName;
  request_params.idCard = form.IDcard;
  for (let i=0;i<requestData.value.length;i++){
    switch (i) {
      case 0:
        request_params.cityName = requestData.value[i]['label']
        break;
      case 1:
        request_params.countyName = requestData.value[i]['label']
        break;
      case 2:
        request_params.townName = requestData.value[i]['label']
        break;
      case 3:
        request_params.villageName = requestData.value[i]['label']
        break;
    }
  }
}
const request_params = {
  farmerName:'',
  idCard:'',
  cityName:'',
  countyName:'',
  townName:'',
  villageName:'',
  helpmanname:'',
  money: '',
  measurename: '',
  pageNum: 1,
  pageSize: 10
}
const form = reactive({
  farmerName:'',
  IDcard: '',
  pageNum: 1,
  pageSize: 10
})
const searchClick=((res)=>{
  myPage();
});
const handleCascaderChange = (value, selectedLabels) => {
  if (value == null) {
    return;
  }
  requestData.value = value.map((val, index) => ({
    // level: index + 1, // 级数
    // value: val,       // 选中的值
    label: findLabelByValue(val,villageOptions), // 查找并添加对应的label
  }));
  console.log(selectedVillage.value);
};


// 辅助函数：根据value查找label
const findLabelByValue = (targetValue, options) => {
  for (const option of options) {
    if (option.value === targetValue) {
      return option.label;
    }
    if (option.children) {
      const foundLabel = findLabelByValue(targetValue, option.children);
      if (foundLabel) {
        return foundLabel;
      }
    }
  }
  return null;
};

onMounted(() => {
  myPage();
});

const changePageNumber = (pageNum) => {
  form.pageNum = pageNum;
  myPage();
}

const handleSizeChange = () => {
  myPage();
}

const myPage = () => {
  area_data();
  searchPage(request_params).then((res) => {

    tableData.value = res.data.list;
    //console.log(res.data.list);

    totalCount.value = res.data.total;
  });

}
const resetClick = () => {
  request_params.pageNum=form.pageNum;
  request_params.pageSize=form.pageSize;
  request_params.farmerName = '';
  request_params.idCard = '';
  request_params.cityName = '';
  request_params.countyName = '';
  request_params.townName = '';
  request_params.villageName = '';
  searchPage(request_params).then((res) => {
    //console.log(res)
    tableData.value = res.data.list;
    totalCount.value = res.data.total;
  });

}
const helpform = reactive({
  helpmanname:'',
  money: '',
  measurename: ''
})
const success=(row)=>{
  // console.log(outerVisible.value)
  outerVisible.value = true
  // console.log(outerVisible.value)
  // console.log(row)
  selectRow.value = []
  selectRow.value.push(tableData.value[row])
  // console.log(tableData.value)
  // console.log(selectRow.value,"select")
  /*h=item;
  helpform.helpmanname = item.valueOf().helpmanname
  helpform.money = item.valueOf().money
  helpform.measurename = item.valueOf().measurename*/
};
import {searchhelp} from '../../api/help.js'
import {searchmeasure} from '../../api/help.js'

const onSubmit1 = async () => {
  dialogFormVisible.value = true
  let result1 = await searchhelp();
  firstCategorys1.data = [];
  result1.data.forEach(item => {
    firstCategorys1.data.push(item);
  });
  let result2 = await searchmeasure();
  firstCategorys2.data = [];
  result2.data.forEach(item => {
    firstCategorys2.data.push(item);
  });

}
import {helpmanService} from '../../api/help.js'
const onSubmit2 = async () => {
  dialogFormVisible.value = false
  outerVisible.value = false
  helpData.value.measureid = value2.value;
  helpData.value.helpmanid = value1.value;
  helpData.value.farmerid = selectRow.value.pop().farmerid;
  console.log(helpData.value)
  let result = await helpmanService(helpData.value);
  if (result.code == 0) {
    alert(result.msg ? result.msg : '成功')
  } else {
    alert('失败')
  }
  window.location.reload()
}
</script>
<template>
  <el-card>
    <!--    <template #header>-->
    <!--    <h2>部门信息</h2>   -->
    <!--    </template>-->
    <el-form :model="form" inline>
      <el-row>
        <el-col :span="10">
          <el-form-item label="地址：">
            <el-cascader v-model="selectedVillage"
                         :options="villageOptions"
                         clearable="true"
                         :props="props1"
                         @change="handleCascaderChange"
                         style="width: 400px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="姓名：">
            <el-input v-model="form.farmerName" placeholder="" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="证件号码：">
            <el-input v-model="form.IDcard" placeholder="" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-col>
        <el-form-item >
          <el-button type="primary" @click="searchClick">查询</el-button>
        </el-form-item>
        <el-form-item >
          <el-button type="primary" @click="resetClick">重置</el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </el-card>

  <div class="table-container" style="display: flex; flex-direction: column;">
    <el-table  :data="tableData" stripe border class="center-table" style="margin-top:20px;">
      <!--  <el-table-column type="index" width="80" />-->
      <el-table-column prop="farmerName" label="姓名" width="100"/>
      <el-table-column prop="idCard" label="证件号码" width="200"/>
      <el-table-column prop="cityName" label="市" width="80" />
      <el-table-column prop="townName" label="县" width="80"/>
      <el-table-column prop="countyName" label="乡" width="80"/>
      <el-table-column prop="villageName" label="村" width="80"/>
      <el-table-column prop="medicare" label="医保情况" width="92"/>
      <el-table-column prop="water" label="水利情况" width="92"/>
      <el-table-column prop="housing" label="住房情况" width="92"/>
      <el-table-column prop="emergency" label="紧急灾难" width="92"/>
      <el-table-column prop="health" label="健康情况" width="92"/>
      <el-table-column prop="educate" label="教育情况" width="92"/>
      <el-table-column #default="scope" label="帮扶关系" width="92">
        <el-button  type="primary" plain  @click="success(scope.$index)">查看</el-button></el-table-column>
    </el-table>
  </div>
  <div style="display: flex; justify-content: flex-end;">
    <el-pagination
        :background=true
        v-model:total="totalCount"
        v-model:page-size="form.pageSize"
        :small=false
        :page-sizes="[5, 10, 20, 50]"
        @size-change="handleSizeChange"
        layout="sizes, prev, pager, next, jumper"
        @current-change="changePageNumber" />
  </div>

  <el-dialog v-model="outerVisible" title="帮扶信息" width="900">
    <div class="table-container" style="display: flex; flex-direction: column;">
      <el-table  :data="selectRow" stripe border class="center-table" style="margin-top:20px;">
        <el-table-column prop="helpmanname"   label="帮扶人" width="100"/>
        <el-table-column prop="money" label="帮扶资金" width="200"/>
        <el-table-column prop="measurename" label="帮扶措施" width="80" />
      </el-table>
    </div>
    <el-dialog v-model="dialogFormVisible" title="帮扶结对" width="500">
      <el-form :model="helpform">
        <el-form-item label="帮扶人姓名：">
          <el-select placeholder="请选择" v-model="value1"  class="width">
            <el-option v-for="(item,i) in firstCategorys1.data"
                       :key="i"
                       :label="item.name"
                       :value="item.helpmanid">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="帮扶资金" >
          <el-input v-model="helpData.money" autocomplete="off" />
        </el-form-item>
        <el-form-item label="帮扶措施：">
          <el-select placeholder="请选择" v-model="value2"  class="width">
            <el-option v-for="(item,i) in firstCategorys2.data"
                       :key="i"
                       :label="item.measurename"
                       :value="item.measureid">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="onSubmit2">
            提交
          </el-button>
        </div>
      </template>
    </el-dialog>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="outerVisible = false">取消</el-button>
        <el-button type="primary" @click="onSubmit1">
          设置
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>


<style scoped>
.el-select{
  width: 160px;
}

:deep(.center-table td),
:deep(.center-table th) {
  text-align: center !important;
}
.table-container {
  /* 假设你想要减少 2px 的内边距 */
  width: 100%; /* 或者其他你需要的宽度 */
  padding: 0px; /* 减少内边距 */
  border-width: 0px; /* 减少边框宽度 */

}
</style>